<template>
    <div class="conteiner d-flex justify-content-between">
        <dropdown-self>
            <template slot="icon">
                <div class="d-flex flex-column align-items-center">
                    <i class="iconfont icon-huiyuan-"></i>
                    <span>开通会员</span>
                </div>
            </template>
            <template slot="content">
                <div style="width: 200px;height: 300px;">

                </div>
            </template>
        </dropdown-self>

        <dropdown-self>
            <template slot="icon">
                <div class="d-flex flex-column align-items-center">
                    <i class="iconfont icon-kanguo"></i>
                    <span>看过</span>
                </div>
            </template>
            <template slot="content">
                <div style="width: 200px;height: 300px;">

                </div>
            </template>
        </dropdown-self>
        <dropdown-self>
            <template slot="icon">
                <div class="d-flex flex-column align-items-center">
                    <i class="iconfont icon-tianjiaguanzhu_vCardx"></i>
                    <span>关注</span>
                </div>
            </template>
            <template slot="content">
                <div style="width: 200px;height: 300px;">

                </div>
            </template>
        </dropdown-self>
        <dropdown-self>
            <template slot="icon">
                <div class="d-flex flex-column align-items-center">
                    <i class="iconfont icon-shangchuan"></i>
                    <span>上专</span>
                </div>
            </template>
            <template slot="content">
                <div style="width: 200px;height: 300px;">

                </div>
            </template>
        </dropdown-self>
        <dropdown-self>
            <template slot="icon">
                <div class="d-flex flex-column align-items-center">
                    <i class="iconfont icon-jujifenbu"></i>
                    <span>客户端</span>
                </div>
            </template>
            <template slot="content">
                <div style="width: 200px;height: 300px;">

                </div>
            </template>
        </dropdown-self>
        <dropdown-self class="portrait">
            <template slot="icon">
                <div class="portrait">
                    <p style="height: 10px"></p>
                    <i class="iconfont icon-touxiang"></i>
                </div>
            </template>
            <template slot="content">
                <div style="width: 400px;height: 300px;">

                </div>
            </template>
        </dropdown-self>
    </div>
</template>

<script>
    import dropdownSelf from './dropdown.vue'
    export default {
        name: "uerCenter",
        components:{
            dropdownSelf
        }
    }
</script>

<style lang="scss" scoped>
.conteiner{
    .iconfont{
        font-size: 24px;
        margin-bottom: 5px;
    }
    .flex-column{
        cursor:pointer;
        color: #bfbfbf;
        &:hover{
            color: #3399e0;
        }
        span{
            white-space: nowrap;
        }
    }
    .icon-huiyuan-{
        color: rgb(247,195,167);
    }
    .portrait{
        i{
            font-size: 40px;
            cursor:pointer;
        }
    }
}
</style>